<template>
  <div
    class="image-adv"
    :class="[
      $$FormData.image_chamfer,
      $$FormData.image_style
    ]"
  >
    <div
      class="image-adv__background"
      :style="{
        backgroundColor: $$FormData.background_color,
        height: $$FormData.background_height + 'rpx'
      }"
    ></div>
    <template v-if="['single', 'hotarea'].includes($$FormData.image_tpl)">
      <ul
        class="image-adv__list"
        :style="{
          paddingLeft: $$FormData.page_edge + 'rpx',
          paddingRight: $$FormData.page_edge + 'rpx'
        }"
      >
        <li
          v-for="(item, index) in $$FormData.imageList"
          :key="index"
          class="image-adv__item"
          :style="{
            marginBottom: `${$$FormData.image_space}rpx`
          }"
          @click="navigateToLink(item.link)"
        >
          <h3 v-if="item.title && $$FormData.image_tpl !== 'hotarea'" class="image-adv__title">{{ item.title }}</h3>
          <div class="image-adv__image" v-if="item.image.src">
            <img :src="item.image.src" class="image-adv__image-img" alt="" mode="widthFix" />
          </div>
          <template v-if="$$FormData.image_tpl === 'hotarea' && item.hotAreas">
            <view
              v-for="area in item.hotAreas"
              :key="area.__key"
              class="image-adv__area"
              :style="{
                transform: `translate(${area.x/2*2}rpx, ${area.y*2/2}rpx)`,
                width: (area.width/2)*2 + 'rpx',
                height: (area.height/2)*2 + 'rpx'
              }"
              @click="navigateToLink(area.link)"
            >
            </view>
          </template>
        </li>
      </ul>
    </template>
    <template v-else-if="['big-slide', 'small-slide', 'nav-slide'].includes($$FormData.image_tpl)">
      <div
        :class="[`image-adv__${$$FormData.image_tpl}`]"
        :style="{
          paddingLeft: $$FormData.page_edge + 'rpx',
          paddingRight: $$FormData.page_edge + 'rpx'
        }"
      >
        <div
          v-for="(item, index) in $$FormData.imageList"
          :key="index"
          class="image-adv__item"
          :style="{
            marginRight: $$FormData.image_space + 'rpx',
          }"
          @click="navigateToLink(item.link)"
        >
          <h3 v-if="item.title" class="image-adv__title">{{ item.title }}</h3>
          <div class="image-adv__image" v-if="item.image.src">
            <img :src="item.image.src" class="image-adv__image-img" alt="" mode="widthFix" />
          </div>
        </div>
      </div>
    </template>
    <template v-else-if="$$FormData.image_tpl === 'swiper'">
      <div
        class="image-adv__swiper"
        :style="{
          height: $$FormData.swiper_height + ($$FormData.image_style === 'shadow' ? 20 : 0) + 'rpx',
          paddingLeft: $$FormData.page_edge + 'rpx',
          paddingRight: $$FormData.page_edge + 'rpx',
        }"
      >
        <swiper
          autoplay
          circular
          indicator-dots
          indicator-active-color="rgba(255,255,255,.8)"
          class="swiper-container"
        >
          <swiper-item v-for="(item, index) in $$FormData.imageList" :key="index">
            <div class="image-adv__item" @click="navigateToLink(item.link)">
              <h3 v-if="item.title" class="image-adv__title">{{ item.title }}</h3>
              <div class="image-adv__image" v-if="item.image.src">
                <img :src="item.image.src" class="image-adv__image-img" alt="" mode="widthFix" />
              </div>
            </div>
          </swiper-item>
          <div class="swiper-pagination" slot="pagination"></div>
        </swiper>
      </div>
    </template>
  </div>
</template>

<script>
import decorMixin from '../decor-mixin'
export default {
  name: 'ImageAdvPreview',
  mixins: [decorMixin]
}
</script>

<style lang="scss" scoped>
.image-adv {
  position: relative;
  &__background {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border-bottom-right-radius: 200rpx 30rpx;
    border-bottom-left-radius: 200rpx 30rpx;
  }
  &__placeholder {
    width: 100%;
    &-img { width: 100% }
  }
  &__list {
  }
  &__item {
    position: relative;
    overflow: hidden;
  }
  &__image {
    position: relative;
    &-img {
      width: 100%;
      transition: all ease .2s;
    }
  }
  &__area {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
  }
  &__title {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10;
    height: 72rpx;
    padding: 0;
    color: #ffffff;
    font-size: 28rpx;
    line-height: 72rpx;
    text-align: center;
    background-color: rgba(51,51,51,.8);
  }
  &__swiper {
    width: 100%;
    overflow: hidden;
    box-sizing: border-box;
    .swiper-container,
    .image-adv__item,
    .image-adv__image,
    .image-adv__image-img {
      width: 100%;
      height: 100%;
    }
    .swiper-container {
      position: relative;
      overflow: hidden;
      transform: translateY(0);
    }
    /deep/ {
      .uni-swiper-dots {
        bottom: 12rpx;
      }
      .uni-swiper-dot {
        width: 14rpx;
        height: 14rpx;
        margin: 0 6rpx;
        border-radius: 20rpx;
        transition: all .5s;
        background-color: rgba(0,0,0,.5);
        &-active {
          width: 34rpx;
          background-color: rgba(255,255,255,.8);
        }
      }
    }
  }
  &__big-slide,
  &__small-slide,
  &__nav-slide {
    width: auto;
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
    padding: 30rpx 0;
    .image-adv__item {
      display: inline-block;
    }
    .image-adv__image {
      width: 660rpx;
    }
  }
  &__small-slide .image-adv__image {
    width: 300rpx;
  }
  &__nav-slide .image-adv__image {
    width: 138px;
  }
  &.shadow {
    overflow: hidden;
    .image-adv__big-slide,
    .image-adv__small-slide,
    .image-adv__nav-slide {
      margin: 0 -30rpx;
      .image-adv__item:first-child {
        margin-left: 30rpx;
      }
      .image-adv__item:last-child {
        margin-right: 30rpx !important;
      }
    }
    .image-adv__swiper {
      padding-bottom: 20rpx;
      .swiper-container {
        box-shadow: 0 20rpx 10rpx -10rpx #c0c4cc;
      }
    }
    .image-adv__image-img,
    .image-adv__item {
      box-shadow: 0 8rpx 20rpx rgba(47,54,70,0.1);
    }
  }
  &.round {
    .image-adv__title {
      border-radius: 0 0 20rpx 20rpx;
    }
    .swiper-container {
      border-radius: 20rpx;
      overflow: hidden;
    }
    .image-adv__image-img {
      border-radius: 20rpx;
    }
  }
}
</style>
